<template>
  <div class="data">
    <div style="
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 15px;
      ">
      <div style="
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
        ">
        <el-radio-group v-model="data_type" @change="changeDateType">
          <el-radio-button label="今日" />
          <el-radio-button label="昨日" />
          <el-radio-button label="近7日" />
          <el-radio-button label="近15日" />
          <el-radio-button label="近30日" />
        </el-radio-group>
        <div style="margin-left: 15px; display: flex; align-items: center; margin-left: 15px;">
          <el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="changeDate" v-model="date_range"
            type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
            style="width: 150px;" />
          <el-button :icon="Refresh" @click="getRow()" circle />

        </div>

      </div>
    </div>

    <el-row :gutter="10">
      <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="6">
        <div class="statistic-card">
          <el-statistic :value="total_data.onlineNum">
            <template #title>
              <div style="display: inline-flex; align-items: center">当前在线</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="6">
        <div class="statistic-card">
          <el-statistic :value="total_data.onlineMax">
            <template #title>
              <div style="display: inline-flex; align-items: center">在线峰值</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="6">
        <div class="statistic-card">
          <el-statistic :value="total_data.registerNum">
            <template #title>
              <div style="display: inline-flex; align-items: center">注册人数</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="6">
        <div class="statistic-card">
          <el-statistic :value="total_data.activeNum">
            <template #title>
              <div style="display: inline-flex; align-items: center">押注人数</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="6">
        <div class="statistic-card">
          <el-statistic :value="total_data.rechargeNum">
            <template #title>
              <div style="display: inline-flex; align-items: center">充值人数</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="6">
        <div class="statistic-card">
          <el-statistic :value="total_data.firstRechargeNum">
            <template #title>
              <div style="display: inline-flex; align-items: center">首充人数</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="6">
        <div class="statistic-card">
          <el-statistic :value="(Number((total_data.firstRechargeNum / total_data.registerNum)) * 100 || 0).toFixed(2)">
            <template #title>
              <div style="display: inline-flex; align-items: center">首充率</div>
            </template>
            <template #suffix>%</template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="6">
        <div class="statistic-card">
          <el-statistic :value="total_data.withdrawNum">
            <template #title>
              <div style="display: inline-flex; align-items: center">提现人数</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="6">
        <div class="statistic-card">
          <el-statistic :value="total_data.rechargeSum / 100">
            <template #title>
              <div style="display: inline-flex; align-items: center">充值金额</div>
            </template>
            <template #prefix>₵</template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="6">
        <div class="statistic-card">
          <el-statistic :value="total_data.withdrawSum / 100">
            <template #title>
              <div style="display: inline-flex; align-items: center">提现金额</div>
            </template>
            <template #prefix>₵</template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="6">
        <div class="statistic-card">
          <el-statistic :value="total_data.difRAndW / 100">
            <template #title>
              <div style="display: inline-flex; align-items: center">充提差</div>
            </template>
            <template #prefix>₵</template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="6">
        <div class="statistic-card">
          <el-statistic :value="total_data.bettingTotal / 100">
            <template #title>
              <div style="display: inline-flex; align-items: center">总下注</div>
            </template>
            <template #prefix>₵</template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="6">
        <div class="statistic-card">
          <el-statistic :value="total_data.winTotal / 100">
            <template #title>
              <div style="display: inline-flex; align-items: center">总开奖</div>
            </template>
            <template #prefix>₵</template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="6">
        <div class="statistic-card">
          <el-statistic :value="(total_data.gameReward * 100).toFixed(2) + `%`">
            <template #title>
              <div style="display: inline-flex; align-items: center">返奖率</div>
            </template>
          </el-statistic>
        </div>
      </el-col>

      <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="6">
        <div class="statistic-card">
          <el-statistic :value="total_data.todayUserRecharge / 100">
            <template #title>
              <div style="display: inline-flex; align-items: center">新增充值</div>
            </template>
            <template #prefix>₵</template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="6">
        <div class="statistic-card">
          <el-statistic :value="total_data.todayUserWithdrawal / 100">
            <template #title>
              <div style="display: inline-flex; align-items: center">新增提现</div>
            </template>
            <template #prefix>₵</template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
    <avue-crud ref="dataRef" :option="option" @refresh-change="getList" :data="data" :page="page"
      @size-change="sizeChange" @current-change="currentChange">
    </avue-crud>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed, nextTick, onUnmounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Refresh } from "@element-plus/icons-vue";
import { getTotalData, getDataReport,getGameStockRecords } from "@/apis/admin";

const total_data = ref({});
const page = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
  searchInfo: {},
});
const option = {
  index: true,
  border: true,
  stripe: true,
  menuAlign: "center",
  loadingText: "加载中...",
  loadingSpinner: "svg",
  loadingSvgViewBox: "-10, -10, 50, 50",
  loadingBackground: "rgba(122, 122, 122, 0.6)",
  menu: false,
  addBtn: false,
  delBtn: false,
  editBtn: false,
  height: "350",
  column: [
    {
      label: "日期",
      prop: "date",
      minWidth: 120,
    },
    {
      label: "在线峰值",
      prop: "onlineMax",
      minWidth: 100,
    },
    {
      label: "注册人数",
      prop: "registerNum",
      minWidth: 100,
    },
    {
      label: "押注人数",
      prop: "activeNum",
      minWidth: 100,
    },
    {
      label: "充值人数",
      prop: "rechargeNum",
      minWidth: 100,
    },
    {
      label: "提现人数",
      prop: "withdrawNum",
      minWidth: 100,
    },
    {
      label: "首充人数",
      prop: "firstRechargeNum",
      minWidth: 100,
    },
    {
      label: "首充率",
      prop: "firstRechargeRate",
      minWidth: 100,
      formatter: (row, value, column) => {
        return (Number(row.firstRechargeRate.toFixed(4)) * 100).toFixed(2) + "%";
      },
    },
    {
      label: "充值金额",
      prop: "rechargeSum",
      minWidth: 100,
      formatter: (row, value, column) => {
        return row.rechargeSum / 100;
      },
    },
    {
      label: "提现金额",
      prop: "withdrawSum",
      minWidth: 100,
      formatter: (row, value, column) => {
        return row.withdrawSum / 100;
      },
    },
    {
      label: "充提差",
      prop: "difRAndW",
      minWidth: 100,
      formatter: (row, value, column) => {
        return row.difRAndW / 100;
      },
    },
    {
      label: "新增充值",
      prop: "todayUserRecharge",
      minWidth: 100,
      formatter: (row, value, column) => {
        return row.todayUserRecharge / 100;
      },
    },
    {
      label: "新增提现",
      prop: "todayUserWithdrawal",
      minWidth: 100,
      formatter: (row, value, column) => {
        return row.todayUserWithdrawal / 100;
      },
    },
    {
      label: "总下注",
      prop: "bettingTotal",
      minWidth: 100,
      formatter: (row, value, column) => {
        return row.bettingTotal / 100;
      },
    },

    {
      label: "总开奖",
      prop: "winTotal",
      minWidth: 100,
      formatter: (row, value, column) => {
        return row.winTotal / 100;
      },
    },

    {
      label: "返奖率",
      prop: "gameReward",
      minWidth: 100,
      formatter: (row, value, column) => {
        return (row.gameReward * 100).toFixed(2) + `%`;
      },
    },

    {
      label: "次日留存",
      prop: "day1ActiveNum",
      minWidth: 100,
      formatter: (row, value, column) => {
        return row.day1ActiveNum + "%";
      },
    },
    {
      label: "二日留存",
      prop: "day2ActiveNum",
      minWidth: 100,
      formatter: (row, value, column) => {
        return row.day2ActiveNum + "%";
      },
    },
    {
      label: "三日留存",
      prop: "day3ActiveNum",
      minWidth: 100,
      formatter: (row, value, column) => {
        return row.day3ActiveNum + "%";
      },
    },
    {
      label: "五日留存",
      prop: "day5ActiveNum",
      minWidth: 100,
      formatter: (row, value, column) => {
        return row.day5ActiveNum + "%";
      },
    },
  ],
};
const data = ref([]);

const sizeChange = (val) => {
  page.pageSize = val;
  getList();
};
const currentChange = (val) => {
  page.currentPage = val;

  getList();
};

const data_type = ref("今日");
const date_range = ref("");

const changeDate = () => {
  if (date_range.value === "" || date_range.value == null) {
    data_type.value = "今日";
  } else {
    data_type.value = "";
  }
  getRow();
};

const changeDateType = () => {
  if (data_type.value !== "") date_range.value = "";
  getRow();
};

const convertToTimestamp = (dateString) => {
  return Date.parse(new Date(dateString));
};

const getRow = () => {
  window.loading(1)
  let start = "";
  let end = "";
  if (date_range.value != "" && date_range.value != null) {
    start = convertToTimestamp(date_range.value[0]);
    end = convertToTimestamp(date_range.value[1]);
  } else {
    const now = new Date();
    if (data_type.value == "今日") {
      start = Date.now();
      end = start || Date.now();
    } else if (data_type.value == "昨日") {
      const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
      // yesterday.setHours(8, 0, 0, 0);

      // const todayMorning = new Date(now);
      // todayMorning.setHours(8, 0, 0, 0);

      start = Date.parse(yesterday);
      end = start || Date.now();
      // end = Date.parse(todayMorning) - 1;
    } else if (data_type.value == "近7日") {
      const lastWeek = new Date(now.getTime() - 6 * 24 * 60 * 60 * 1000);
      console.log('lastWeek:', lastWeek)
      start = Date.parse(lastWeek);
      end = Date.parse(new Date(now));
      // lastWeek.setHours(8, 0, 0, 0);

      // const todayMorning = new Date(now);
      // todayMorning.setHours(8, 0, 0, 0);

      // start = Date.parse(lastWeek);
      // end = Date.parse(todayMorning) - 1;
    } else if (data_type.value == "近15日") {
      const lastTwoWeeks = new Date(now.getTime() - 14 * 24 * 60 * 60 * 1000);
      start = Date.parse(lastTwoWeeks);
      end = Date.parse(new Date(now));
      // lastTwoWeeks.setHours(8, 0, 0, 0);
      // const todayMorning = new Date(now);
      // todayMorning.setHours(8, 0, 0, 0);
  
      // start = Date.parse(lastTwoWeeks);
      // end = Date.parse(todayMorning) - 1;
    } else if (data_type.value == "近30日") {
      const lastMonth = new Date(now.getTime() - 29 * 24 * 60 * 60 * 1000);
      start = Date.parse(lastMonth);
      end = Date.parse(new Date(now));
      // lastMonth.setHours(8, 0, 0, 0);

      // const todayMorning = new Date(now);
      // todayMorning.setHours(8, 0, 0, 0);

      // start = Date.parse(lastMonth);
      // end = Date.parse(todayMorning) - 1;
    }
  }
  let convertTimestamp = (timestamp) => {
    const date = new Date(timestamp * 1000); // 将时间戳转换为毫秒
    const year = date.getFullYear();
    const month = ('0' + (date.getMonth() + 1)).slice(-2); // 补全两位数
    const day = ('0' + date.getDate()).slice(-2);
    const hours = ('0' + date.getHours()).slice(-2);
    const minutes = ('0' + date.getMinutes()).slice(-2);
    const seconds = ('0' + date.getSeconds()).slice(-2);

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  }
  console.log('startTime:', convertTimestamp(Math.ceil(start / 1000)))
  console.log('endsTime:', convertTimestamp(Math.ceil(end / 1000)))
  getTotalData
    .post("", {
      startTime: Math.ceil(start / 1000),
      endTime: Math.ceil(end / 1000),
    })
    .then((res) => {
      if (res.code == 200) {
        total_data.value = res.data;
      }
      window.loading(0)
    });
};


const getList = () => {
  window.loading(1)
  getDataReport
    .post("", {
      page: page.currentPage,
      pageSize: page.pageSize,
      startTime:
        Date.parse(
          new Date(new Date().getTime() - 60 * 24 * 60 * 60 * 1000 + 5 * 60 * 60 * 1000)
        ) / 1000,
      endTime: Date.parse(new Date(new Date().getTime() + 5 * 60 * 60 * 1000)) / 1000,
    })
    .then((res) => {
      if (res.code == 200) {
        data.value = res.data.list;
        page.total = res.data.total;
      }
      window.loading(0)
    });
};



const resizeChart = () => {
};

onMounted(() => {
  getRow();
  getList();
  window.addEventListener('resize', resizeChart);
});

onUnmounted(() => {
  window.removeEventListener('resize', resizeChart);
});
</script>

<style lang="scss" scoped>
.statistic-card {
  text-align: center;
  margin-bottom: 10px;
  //padding: 20px;
  border-radius: 4px;
  background-color: #f5f5f5;
}

.data {
  width: 100%;

  .charts-box {
    margin-top: 15px;
    width: 100%;
    height: 500px;
    background: #f5f5f5;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 10px 15px;
  }
}

.fullscreen {
  /* position: fixed !important;
  top: -45% !important;
  left: 0 !important; */
  width: 100vh !important;
  height: 100vw !important;
  z-index: 9999 !important;
}

.rotate-90 {
  /* transform: rotate(90deg);
  transform-origin: bottom left;
  top: -300px; */
}

.rotate-height {
  /* height: 600px; */
}

/* 确保el-collapse-item内容完全展示 */
.el-collapse-item__content {
  overflow: visible !important;
}
</style>
